<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")

			});
		</script>
		<link rel="stylesheet" href="css/iconfont.css">

		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.contentBody {				
				width: 800px;
				/* 设置父元素高度随着子元素高度 */
				/* overflow: hidden; */
				margin: 0 auto;
				background-color: red;
			}

			.toolbar {
				float: left;
				width: 190px;
				height: 400px;
						
			}
			.toolbar ul li{
				list-style: none;
			}
			
			.content {
				
				/* display: none; */
				width: 600px;
				height: 400px;
				left: 200px;
				box-shadow: 0px 0px 30px darkgrey;
				
			}

			.toolbar ul li .nav_item {
				/* 行内元素转换为块元素，行内元素无法修改大小，块元素可以修改大小 */
				display: block;
				/* 去除下划线 */
				text-decoration: none;
				background-color: darkgray;
				/* 设置块元素大小 */
				padding-left: 2em;
				/* css没有提供垂直居中的属性，可以通过技巧居中：将文字的行高等于块元素的行高可实现 */
				line-height: 40px;
				/* 设置字体颜色 */
				color: white;
				/* 设置字体与边框距离 */

			}

			/* 设置鼠标悬浮其上的颜色 */
			.toolbar .nav_item:hover {
				background-color: orange;

			}
			.toolbar .nav_item:hover +.content {
				display: block;
				
			}
			
			.content li a:hover {
				color: orange;
				
			}

			/* 子绝父相，子元素绝对定位，父元素相对定位 */
			.toolbar .box {
				position: relative;
			}

			.toolbar .box .content {
				position: absolute;
				right: 0;
				top: -160px;
			}

			/* 去除li前的圆圈装饰 */
			.content ul{
				list-style: none;
			
			}
			.content ul li{
				margin-left: 40px ;
				margin-top: 20px;
			}
			.content ul li a{		
				width: 184px;
				height: 100px;				
				float: left;				
				line-height: 80px;				
				text-decoration: none;
				display: inline-flex;
				font-size: 14px;
				
					
			} 
				
			.content ul li a img{				
				width:60px;
				height: 60px;					
			}
			.box{
				position: relative;
			}
			.box .toRight{
				position: absolute;
				right: 10px;
				top: 50%;
				/* transform表示移动自身大小的一半 */
				transform: translateY(-50%);
			
			
			}
			
		</style>
	</head>
	<body>
		<div class="contentBody">
			<div class="toolbar">
				<ul>
					<li class="box">
						<a class="nav_item" href="#">手机 电话卡 <span class="iconfont icon-xiangyou1 toRight"></span> </a>
						
					</li>
					<li class="box">
						<a class="nav_item" href="#">电视 盒子<span class="iconfont icon-xiangyou1 toRight"></span></a>
					</li>
					<li class="box">
						<a class="nav_item" href="#">笔记本 平板<span class="iconfont icon-xiangyou1 toRight"></span></a>
					</li>
					<li class="box">
						<a class="nav_item" href="#">家电 插线板<span class="iconfont icon-xiangyou1 toRight"></span></a>
					</li>
					<li class="box">
						<a class="nav_item" href="#">出行 穿戴<span class="iconfont icon-xiangyou1 toRight"></span></a>
						<div class="content">
							<ul>
								<li><a href=""><img src="img/shouhuan.png" alt="">手环手表</a></li>
								<li><a href=""><img src="img/erji.png" alt="">小米 Buds 4 Pro</a></li>
								<li><a href=""><img src="img/pinghengche.jpg" alt="">平衡车</a></li>
								<li><a href=""><img src="img/diandongche.jpg" alt="">滑板车</a></li>
								<li><a href=""><img src="img/zixingche.jpg" alt="">自行车</a></li>
								<li><a href=""><img src="img/chezaichongdianqi.jpg" alt="">车载充电器</a></li>
								<li><a href=""><img src="img/yanjing.png" alt="">眼镜</a></li>
								<li><a href=""><img src="img/chongdianbao.jpg" alt="">充电宝</a></li>
								<li><a href=""><img src="img/beibao.png" alt="">背包</a></li>
								<li><a href=""><img src="img/lvxingxiang.jpg" alt="">旅行箱</a></li>
								<li><a href=""><img src="img/jiluyi.jpg" alt="">智能记录仪</a></li>
								<li><a href=""><img src="img/yinxiang.jpg" alt="">投影仪</a></li>
							</ul>
						</div>
					</li>
					<li class="box">
						<a class="nav_item" href="#">智能 路由器<span class="iconfont icon-xiangyou1 toRight"></span></a>
					</li>
					<li class="box">
						<a class="nav_item" href="#">电源 配件<span class="iconfont icon-xiangyou1 toRight"></span></a>
					</li>
					<li class="box">
						<a class="nav_item" href="#">健康 儿童<span class="iconfont icon-xiangyou1 toRight"></span></a>
					</li>
					<li class="box">
						<a class="nav_item" href="#">耳机 音箱<span class="iconfont icon-xiangyou1 toRight"></span></a>
					</li>
					<li class="box">
						<a class="nav_item" href="#">生活 箱包<span class="iconfont icon-xiangyou1 toRight"></span></a>
					</li>

				</ul>
			</div>

		</div>

	</body>
</html>
